<template>
	<view class="page-container">
		<ls-skeleton style="#06A972" :loading="loading">
			<!-- 顶部 搜索部分 -->
			<!-- 	<view class="search uni-inline-item">
				<icon style="margin-left: 20rpx;" type="search" size="14" />
				<view class="uni-flex-item">
					<input type="text" class="uni-input" v-model="keyword" placeholder="输入关键字进行搜索" />
				</view>
			</view> -->
			<view style="text-align: center; font-size: 36rpx; font-weight: bold; color: white;">
				车灯超市
			</view>
			<!-- 顶部 导航栏部分 -->
			<!-- 	<view class="category-nav">
				<view class="nav-item" :class="{'active': selectedCategory === 'car'}" @click="selectCategory('car')">轿车
				</view>
				<view class="nav-item" :class="{'active': selectedCategory === 'motorcycle'}"
					@click="selectCategory('motorcycle')">摩托车</view>
			</view> -->
			<!-- 			<view v-if="selectedCategory === 'car'"> -->
			<!-- 顶部 Tab 部分 -->
			<view class="top-tab-container" style="display: flex; width: 100%; justify-content: space-between;">
				<view class="left-aside">
					<scroll-view class="tab" scroll-x="true" style=" overflow: hidden;" scroll-with-animation
						:scroll-top="tabLeft">
						<block v-for="(item, index) in tabList" :key="index">
							<text :class="['tab-item', tabClick == index ? 'on' : '']"
								@click="longClick(index, item.typeId)">
								{{ item.itemName }}
							</text>
						</block>
					</scroll-view>
				</view>
				<!-- 搜索图标部分，占10%的宽度 -->
				<view style="width: 20%; display: flex; align-items: center; justify-content: center;">
					<u-icon name="search" size="60rpx" color="#ffffff"></u-icon>
				</view>
			</view>
			<view class="container">
				<!-- 两列并排布局 -->
				<view class="three-column-layout">
					<!-- 左侧分类列表 -->
					<view class="middle-aside" v-if="familyList.length > 0">
						<scroll-view class="brdge" scroll-y="true" scroll-with-animation :scroll-top="familyTop">
							<block v-for="(item, index) in familyList" :key="index">
								<view :class="['category-item', active == index ? 'on' : '']"
									@click="familyClick(index, item.typeId)">
									{{ item.itemName }}
								</view>
							</block>
						</scroll-view>
						<view @click="goToCartList" class="mic-container flex-item" style="position: absolute;left: 50rpx;bottom: 0rpx;">
							<!-- 搜索图标 -->
							<view>
								<image style="width: 35px;height: 35px;" src="@/static/images/mechant.png"></image>
							</view>
							<!-- 标题 -->
							<view class="title" style="text-align: center; margin-top: 10px; margin-bottom: 50rpx;">
								购物车
							</view>
						</view>
					</view>

					<!-- 产品信息 :url="'/pages/goods/goods_detail/index?productId='+item.productId + '&type=STORE'" -->
					<view class="product-section">
						<block v-if="list.length > 0">
							<view class="product-list">
								<view class="product-item" v-for="(item, index) in list" :key="index"
									@click="fetchProductList(item)">
									<view class="product-box">
										<view class="pic">
											<image :src="item.email" mode="aspectFill"></image>
										</view>
										<view class="name">{{ truncate(item.itemName, 4) }}</view>
									</view>
								</view>
							</view>
						</block>
						<u-empty v-else mode="favor" icon="../../../../static/images/list.png" text="暂无产品" width="320"
							height="320" textSize="24">
						</u-empty>
					</view>
				</view>

				<!-- 如果没有 familyList，显示一个空的提示 -->
				<u-empty v-if="familyList.length === 0" marginTop="100" mode="favor"
					icon="../../../../static/images/list.png" text="暂无产品" width="320" height="320"
					textSize="24"></u-empty>

			</view>

			<!-- 模态框 -->
			<!-- 	<u-modal :show="show" :title="title" @confirm="saveInvite">
					<u--input placeholder="请输入邀请码" border="surround" v-model="inviteCode" type="number"></u--input>
				</u-modal> -->
			<!-- 			</view> -->
			<!-- 			<view v-else-if="selectedCategory === 'motorcycle'"> -->
			<!-- 如果没有 familyList，显示一个空的提示 -->
			<!-- 				<u-empty marginTop="100" mode="favor"
					icon="../../../../static/images/list.png" text="暂无产品" width="320" height="320"
					textSize="24"></u-empty> -->
			<!-- 显示摩托车相关内容 -->
			<!-- 			</view> -->
		</ls-skeleton>
	</view>
</template>


<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getClassification,
		getList,
		getUpSupplier,
		getFamily
	} from '@/api/product.js';
	import {
		saveInvite,
		getUserInfo
	} from '@/api/user.js';
	let isWidth = (uni.getSystemInfoSync().windowWidth - 65) / 4;
	let isHeight = (uni.getSystemInfoSync().windowHeight - 100) / 4
	export default {
		data() {
			return {
				selectedCategory: 'car',
				tabClick: 0,
				tabList: [],
				familyList: [],
				list: [],
				familyLeft: 0,
				active: 0,
				isWidth: isWidth,
				isHeight: isHeight,
				show: false,
				title: '邀请码',
				inviteCode: '',
				phone: '',
				supplierInfo: {},
				loading: true,
				tabLeft: 0,
				scrollTop: 0,
				familyTop: 0,
			}

		},

		computed: {
			...mapGetters({
				isLogin: 'isLogin',
				uid: 'uid',
				userType: 'userType',
				bgUserType: 'bgUserType'
			})

		},
		watch: {
			userType: {
				handler: function(newV, oldV) {
					this.getUpSupplier();
				},
				deep: true,
			},
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						this.getUpSupplier();
						this.getProductCategory()
					}
				},
				deep: true,
			},
		},
		onLoad() {
			let that = this;
			// uni.getSystemInfo({
			// 	success(e) {
			// 		that.navigationBarAndStatusBarHeight = e.statusBarHeight + 'px';
			// 		that.isWidth = (e.windowWidth - 65) / 4;
			// 	}
			// });
			that.getProductCategory();
			// 判断角色如果是门店就获取上游供应商，如果没有就去填邀请码，如果是批发商就提示联系客服
			if (that.bgUserType) {
				that.getUserInfo();
			} else {
				that.getUpSupplier();
			}
			// if (that.userType == 'STORE') {
			// 	that.getUpSupplier();
			// } else if (that.userType == 'SALE') {
			// 	that.getUpSupplier();
			// } else if (that.userType == 'CAR') {

			// }
		},
		onShow() {
			console.log("userType:" + this.userType);
		},
		onReady() {

		},


		methods: {
			goToCartList(){
				uni.navigateTo({
					url: '/pages/addCart/index'
				});
			},
			truncate(text, length) {
				if (text.length > length) {
					return text.substring(0, length) + '...';
				}
				return text;
			},
			selectCategory(category) {
				this.selectedCategory = category; // 切换类别
				console.log(this.selectedCategory)
			},
			/**
			 * 导航点击
			 * @param {Object} index
			 * @param {Object} dictId
			 */
			// longClick(index, dictId) {
			// 	let that = this;
			// 	that.tabClick = index;
			// 	that.active = 0;
			// 	that.pid = dictId;
			// 	if (that.tabList.length > 2) {
			// 		that.tabLeft = (index - 2) * that.isWidth;
			// 	}
			// 	that.getFamily(dictId);
			// },
			longClick(index, dictId) {
				let that = this;
				that.tabClick = index;
				that.active = 0;
				that.pid = dictId;
				if (that.tabList.length > 2) {
					that.scrollTop = (index - 2) * that.isHeight;
				}
				that.getFamily(dictId);
			},

			/**
			 * 
			 * 获取产品默认分类
			 */
			getProductCategory() {
				let that = this;
				getClassification().then(res => {
					that.tabList = res.value;
					that.getFamily(res.value[that.tabClick].typeId);
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},



			/**
			 * 获取产品父系列
			 * @param {int}  dictId
			 */
			getFamily(dictId) {
				console.log('dictId:', dictId); // 检查 dictId 是否为 undefined
				let that = this;
				getFamily({
					classification: dictId
				}).then(res => {
					that.familyList = res.value;
					that.getProductList(dictId, res.value[that.active].typeId)
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},


			/**
			 * 系类点击
			 * @param {int}  index
			 * @param {int}  dictId
			 */
			// familyClick(index, dictId) {
			// 	let that = this;
			// 	that.active = index;
			// 	if (that.familyList.length > 2) {
			// 		that.familyLeft = (index - 2) * that.isWidth;
			// 	}
			// 	that.getProductList(that.tabList[that.tabClick].dictId, dictId);
			// },
			familyClick(index, dictId) {
				let that = this;
				that.active = index;
				if (that.familyList.length > 2) {
					that.familyTop = (index - 2) * that.isHeight;
				}
				that.getProductList(that.tabList[that.tabClick].typeId, dictId);
			},


			/**
			 * 获取产品列表
			 * @param {int}  dictId
			 */
			getProductList(pid, dictId) {
				let that = this;
				getFamily({
					// getList({
					// parentId: dictId,
					// family: dictId,
					classification: dictId
				}).then(res => {
					that.list = res.value;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 获取上游供应商
			 */
			getUpSupplier() {
				let that = this;
				console.log(this.isLogin)
				if (this.isLogin) {

					if (that.userType != 'CAR') {
						getUpSupplier({
							userInfoId: that.uid
						}).then(res => {
							// that.show = false
							that.supplierInfo = res.value
						}).catch(err => {
							// that.show = true
							that.$util.Tips({
								title: err
							});
						})
					}

				}

			},

			/**
			 * 获取当前用户信息
			 */
			getUserInfo() {
				let that = this;
				getUserInfo({
					userInfoId: that.uid
				}).then(res => {
					that.supplierInfo = res.value
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 绑定上游供应商
			 */
			// saveInvite() {
			// 	let that = this;
			// 	if (!that.inviteCode) {
			// 		return that.$util.Tips({
			// 			title: '请输入上游手机号'
			// 		});
			// 	}
			// 	saveInvite({
			// 		userInfoId: that.uid,
			// 		inviteCode: that.inviteCode
			// 	}).then(res => {
			// 		that.$util.Tips({
			// 			title: '绑定成功'
			// 		});
			// 		that.show = false;
			// 		that.getUpSupplier();
			// 	}).catch(err => {
			// 		that.$util.Tips({
			// 			title: err
			// 		});
			// 	})
			// },

			/**
			 * 拨打电话
			 */
			contact(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			fetchProductList(item) {
				getList({
						typeId: item.typeId,
						itemName: item.itemName,
					})
					.then(res => {
						if (res && res.value && res.value.list) {
							if (res.value.list.length === 1) {
								const categoryId = res.value.list[0].categoryId; // 获取唯一对象的 categoryId
								const url = `/pages/goods/goods_detail/index?productId=${categoryId}&type=STORE`;
								uni.navigateTo({
									url: url,
								});
							} else {
								const url =
									`/pages/goods/goods_list/index?typeId=${ item.typeId }&itemName=${ item.itemName}&type=${this.userType}`;
								uni.navigateTo({
									url: url,
								});
							}
						}
					})
					.catch(err => {
						this.$util.Tips({
							title: err.message || "获取产品列表失败"
						});
					})
					.finally(() => {
						this.loading = false;
					});
			},
		}
	}
</script>

<style>
	/* 导航栏部分样式 */
	.category-nav {
		display: flex;
		margin-top: 10px;
		justify-content: center;
	}
	
	.mic-container,
	.camera-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.mic-container {
		/* 麦克风图标位置调整 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.flex-item {
		display: flex;
		flex-direction: column;
		/* 让标题和内容垂直排列 */
		justify-content: center;
		align-items: center;
	}

	.nav-item {
		padding: 10px 20px;
		cursor: pointer;
		font-size: 16px;
	}

	.nav-item.active {
		border-bottom: 2px solid #06A972;
		font-weight: bold;
	}

	.page-container {
		background-color: #06A972;
		/* 示例背景色，可根据需求调整 */
		min-height: 100vh;
		/* 确保背景颜色覆盖整个屏幕 */
		padding-top: 95rpx;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;
		/* 均匀分布 */
	}

	.product-box {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.product-item {
		width: 30%;
		/* 每个产品占 30%，留些间距 */
		margin-bottom: 10px;
		/* 每个产品之间增加垂直间距 */
		text-align: center;
		/* 居中对齐 */
	}

	.pic {
		width: 100%;
		overflow: hidden;
		border-radius: 4px;
	}

	.pic image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.flex-column {
		margin-top: 5px;
		/* 文字与图片的间距 */
	}

	.name {
		font-size: 14px;
		/* 根据需要调整字体大小 */
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* 防止文字换行 */
	}

	.search {
		height: 63rpx;
		display: flex;
		justify-content: center;
		/* 居中 */
		align-items: center;
		/* 垂直居中 */
		background-color: #f0f0f0;
		/* 搜索框背景颜色，浅灰色 */
		/* 	margin-top: 80rpx; */
		margin-left: 20rpx;
		margin-right: 260rpx;
		border-radius: 25px;
		/* 圆角效果 */
	}

	.uni-input {
		background-color: transparent;
		/* 设置输入框背景为透明 */
		border: none;
		/* 移除边框 */
		border-radius: 20px;
		/* 圆角效果 */
		outline: none;
		/* 移除输入框聚焦时的轮廓线 */
	}

	.uni-inline-item {
		display: flex;
		align-items: center;

		/* 对齐图标与输入框 */
	}

	.uni-flex-item {
		flex: 1;
		/* 填满剩余空间 */
	}


	.container {
		background-color: #666;
		display: flex;
		flex-direction: column;
		height: 86.5vh;
	}

	.three-column-layout {
		display: flex;
		height: 100%;
	}

	.container .tab text {
		display: block;
		white-space: nowrap;
	}

	/* 	.left-aside, */
	.middle-aside,
	.product-section {
		overflow-y: auto;
		padding: 10rpx;
	}

	.left-aside {
		height: 90rpx;
		width: 80%;
	}

	.tab {
		height: 100%;
		background-color: #06A972;
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.tab-item {
		line-height: 80rpx;
		font-size: 30rpx;
		padding: 20rpx;
		color: #e5e5e5;
		cursor: pointer;
		transition: all 0.3s ease;
		/* 圆角效果 */
	}

	.tab-item.on {
		color: #ffffff;
		/* 选中的背景色 */
		font-weight: bold;
		font-size: 34rpx;
		transform: scale(1.1);
		/* 放大选中的Tab项 */
	}

	.middle-aside {
		width: 180rpx;
		background-color: #f7f7f7;
	}

	.product-section {
		flex: 1;
		padding: 10rpx;
		background-color: #e6e6e6;
	}

	/* 选项卡滚动区域的样式 */
	.scroll-view {
		display: flex;
		overflow-x: auto;
	}

	.category-item {
		font-size: 25rpx;
		margin-top: 15px;
		padding: 20rpx 10rpx;
		text-align: center;
	}

	.category-item.on {
		font-weight: bold;
		color: #06A972;
	}

	.product-list {
		padding: 20rpx;
	}

	.product_list {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.pic image {
		width: 100rpx;
		height: 100rpx;
	}

	.flex-column.text {
		flex: 1;
		padding-left: 20rpx;
	}

	.name {
		font-size: 28rpx;
		font-weight: bold;
	}

	.price {
		color: #F63707;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>